<template>
  <div class="my-container">
    <div class="title">闸坝智能调度与安全监测专题</div>
    <router-view />
    <van-tabbar v-model="active" route>
      <van-tabbar-item to="/gateDam">
        <span>总体概况</span>
        <template #icon="props">
          <img :src="props.active ? iconIndexActive : iconIndex" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item to="/beijiangDetails">
        <span>北江船闸</span>
        <template #icon="props">
          <img :src="props.active ? iconBeiJiangActive : iconBeiJiang" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item to="/lianjiangDetails">
        <span>连江闸坝</span>
        <template #icon="props">
          <img :src="props.active ? iconLianJiangActive : iconLianJiang" />
        </template>
      </van-tabbar-item>      
      <van-tabbar-item to="/channelNotice">
        <span>航道通告</span>
        <template #icon="props">
          <img :src="props.active ? iconNoticeActive : iconNotice" />
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script setup>
  import { ref } from 'vue';
  import iconIndex from '../../static/images/icon-index.png';
  import iconIndexActive from '../../static/images/icon-index-active.png';
  import iconLianJiang from '../../static/images/icon-lianjiang-details.png';
  import iconLianJiangActive from '../../static/images/icon-lianjiang-details-active.png';
  import iconBeiJiang from '../../static/images/icon-details.png';
  import iconBeiJiangActive from '../../static/images/icon-details-active.png';
  import iconNotice from '../../static/images/icon-notice.png';
  import iconNoticeActive from '../../static/images/icon-notice-active.png';

  const active = ref(0);
</script>

<style lang="scss" scoped>
  .my-container{
    width: 100%;
    height: 100%;   
    .title{
      height: 68px;
      background-image:url('../../static/images/title-bg.png');
      background-size: 100% 100%;
      background-repeat: no-repeat;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 24px;
      font-weight: 500; 
      color: #fff;   
    }
  }
</style>